<template>
	<view class="inline-flex" @click.stop="onClick">
		<slot></slot>
		<view v-if="showPicker" class="absolute text-center fs-14 leading-22" :style="`z-index:999;background:url('${bgImg}') no-repeat;background-size:100% 100%;padding:8px 10px 4px;top:26px;left:-10px;`">
			<view v-for="(item,i) in list" :key="i" class="px-20 py-4" style="white-space:nowrap;" :class="i === current ? 'color-primary': 'text-color-hint'" @click.stop="onItemPick(item, i)">{{formater && formater(item) || item}}</view>
		</view>
	</view>
</template>

<script setup name="PopupPicker">
	import { onMounted, onUnmounted, ref } from 'vue'
	

	const bgBase64 = "PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODYiIHZpZXdCb3g9IjAgMCA4OCA4NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlVuaW9uIiBmaWx0ZXI9InVybCgjZmlsdGVyMF9kXzEzM185NzIzKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNTEuMjY0OCAxMEw0NS40MTI2IDQuNTM3ODlDNDQuNjI0NyAzLjgwMjUzIDQzLjM5NTggMy44MjM3MSA0Mi42MzM3IDQuNTg1NzlMMzcuMjE5NSAxMEgxNEM5LjU4MTcyIDEwIDYgMTMuNTgxNyA2IDE4VjcwQzYgNzQuNDE4MyA5LjU4MTcyIDc4IDE0IDc4SDc0Qzc4LjQxODMgNzggODIgNzQuNDE4MyA4MiA3MFYxOEM4MiAxMy41ODE3IDc4LjQxODMgMTAgNzQgMTBINTEuMjY0OFoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZF8xMzNfOTcyMyIgeD0iMCIgeT0iMCIgd2lkdGg9Ijg4IiBoZWlnaHQ9Ijg2IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPgo8ZmVPZmZzZXQgZHk9IjIiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMyIvPgo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJvdXQiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMiAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93XzEzM185NzIzIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzEzM185NzIzIiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo="
	
	const porps = defineProps({
		list: {
			type: Array,
			default: []
		},
		current: {
			type: Number,
			default: 0
		},
		formater: {
			type: Function,
			default: function(item) {
				return item
			}
		},
		pickerStyle: {
			type: String
		}
	})
	
	const emits = defineEmits(['onItemPick'])
	
	const showPicker = ref(false)
	
	const onClick = () => {
		showPicker.value = true
	}
	
	const onItemPick = (item, index) => {
		showPicker.value = false
		emits('onItemPick', { item, index })
	}
	
	const onClickOutSide = () => {
		showPicker.value = false
	}

	const bgImg = ref('');
	const updBgImg = () => {
		const array = wx.base64ToArrayBuffer(bgBase64)
        const base64 = wx.arrayBufferToBase64(array);
		bgImg.value = 'data:image/svg+xml;base64,' + base64
	};
	
	onMounted(() => {
		updBgImg();
		uni.$on('onClickOutSide', onClickOutSide)
	})
	
	onUnmounted(() => {
		uni.$off('onClickOutSide', onClickOutSide)
	})
</script>
